import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import { Spin } from 'antd';
import axios from 'axios';
import './RankingListCon.scss';
class Com extends Component {
  constructor (props) {
    super(props)
    this.state = {
      title : '巅峰榜·流行指数',
      RankingList : [],
      songTime : [],
      loading : true
    }
  }

  componentDidMount () {
    axios.get('https://api.bzqll.com/music/netease/search?key=579621905&s=流行&type=song&limit=40&offset=0')
      .then(data => {
        console.log(data)
        this.setState({
            RankingList : data.data.data,
            loading : false
        })
      })
      .catch((err) => {
        console.log(err)
      })
    // var second = [];
    // this.state.RankingList.map((item, index) => {
    //   var num = Number;
    //   if (item.time%60 < 10) {
    //     num = '0'+item.time%60
    //     var Time = parseInt(item.time/60)+':'+num
    //     second.push(Time);
    //   } else {
    //     num = item.time%60
    //     var Time = parseInt(item.time/60)+':'+num
    //     second.push(Time);
    //   }
    // })
    // this.setState({
    //   songTime : second
    // })
  }

  goDetail (id) {
    console.log(this.props)
    this.props.history.push('/player/' + id)
  }

  cutList (e, name) {
    console.log('点击了切换排行榜')
    console.log(e.target.innerHTML)
    this.setState({
      title : e.target.innerHTML,
      loading : true
    })
    axios.get('https://api.bzqll.com/music/netease/search?key=579621905&s='+name+'&type=song&limit=40&offset=0')
      .then(data => {
        console.log(data)
        this.setState({
            RankingList : data.data.data,
            loading : false
        })
      })
      .catch((err) => {
        console.log(err)
      })
    // axios.get('https://api.bzqll.com/music/netease/search?key=579621905&s='+e.target.innerHTML+'&type=singer&limit=80&offset=0')
    // .then(data => {
    //     this.setState({
    //         singerList : data.data.data.artists
    //     })
    // })
    // this.refs.ImgList.style.display = 'none'
    // $('.ImgList').slideUp(500)
  }

  render () {
    return (
      <div className = "RankingListCon">
        <div className="con-left">
          <h1>QQ音乐巅峰榜</h1>
          <ul>
              <li>
                  <NavLink to="/musichall/rankinglist/流行" onClick={(e)=>{this.cutList(e, '流行')}}>巅峰榜·流行指数</NavLink>
              </li>
              <li>
                  <NavLink to="/musichall/rankinglist/热歌" onClick={(e)=>{this.cutList(e, '热歌')}}>巅峰榜·热歌</NavLink>
              </li>
              <li>
                  <NavLink to="/musichall/rankinglist/新歌" onClick={(e)=>{this.cutList(e, '新歌')}}>巅峰榜·新歌</NavLink>
              </li>
              <li>
                  <NavLink to="/musichall/rankinglist/说唱" onClick={(e)=>{this.cutList(e, '说唱')}}>说唱榜</NavLink>
              </li>
              <li>
                  <NavLink to="/musichall/rankinglist/网络" onClick={(e)=>{this.cutList(e, '网络')}}>巅峰榜·网络歌曲</NavLink>
              </li>
              <li>
                  <NavLink to="/musichall/rankinglist/内地" onClick={(e)=>{this.cutList(e, '内地')}}>巅峰榜·内地</NavLink>
              </li>
              <li>
                  <NavLink to="/musichall/rankinglist/港台" onClick={(e)=>{this.cutList(e, '港台')}}>巅峰榜·港台</NavLink>
              </li>
              <li>
                  <NavLink to="/musichall/rankinglist/欧美" onClick={(e)=>{this.cutList(e, '欧美')}}>巅峰榜·欧美</NavLink>
              </li>
              <li>
                  <NavLink to="/musichall/rankinglist/韩国" onClick={(e)=>{this.cutList(e, '韩国')}}>巅峰榜·韩国</NavLink>
              </li>
              <li>
                  <NavLink to="/musichall/rankinglist/影视" onClick={(e)=>{this.cutList(e, '影视')}}>巅峰榜·影视金曲</NavLink>
              </li>
              <li>
                  <NavLink to="/musichall/rankinglist/日本" onClick={(e)=>{this.cutList(e, '日本')}}>巅峰榜·日本</NavLink>
              </li>
              <li>
                  <NavLink to="/musichall/rankinglist/K歌" onClick={(e)=>{this.cutList(e, '经典')}}>巅峰榜·K歌金曲</NavLink>
              </li>
          </ul>
        </div>
        <div className="con-right">
          <h1>{ this.state.title }</h1>
          <div className="con-right-btn">
            <p className="iconfont icon-video_light"> 播放全部</p>
            <p className="iconfont icon-roundadd"> 添加到</p>
            <p className="iconfont icon-down_light"> 下载</p>
            <p className="iconfont icon-edit"> 批量操作</p>
            <p className="iconfont icon-comment"> 评论</p>
          </div>
          <ul>
            <li>
              <b>歌曲</b>
              <em>歌手</em>
              <span>时长</span>
            </li>
            {
              this.state.loading
              ?
              <Spin size="large" spinning="true"/>
              :
              this.state.RankingList.map((item, index) => {
                  return (
                      <li key={ item.id } onClick = { this.goDetail.bind(this, item.id) }>
                        <p>{ index+1 }</p>
                        <b>
                          <img src={ item.pic } alt=""/>
                          { item.name }
                        </b>
                        <em>{ item.singer }</em>
                        {
                          item.time%60 < 10
                          ?
                          <span>{ parseInt(item.time/60)+':0'+item.time%60 }</span>
                          :
                          <span>{ parseInt(item.time/60)+':'+item.time%60 }</span>
                        }
                      </li>
                  )
              })
            }
          </ul>
        </div>
      </div>
    )
  }
}

export default Com;
